﻿/*
Copyright (c) Microsoft Corporation

All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0   

THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT.  

See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. 
*/
body {
    height:100%;
}

a {
    cursor:pointer;
}

header {
    position:absolute;
    left:97px;
    top:36px;
}

header h1 {
    font-size:40px;
    color:#fff;
    font-weight:normal;
    margin: 0;
    padding: 0;
}

h1.yeti_logo {
    width: 287px;
    height: 113px;
    background-image:url(/images/yeti_logo.png);
    background-repeat:no-repeat;
}

header h1 span{
    display:none;
}

header a { /* back button */
    position:absolute;
    top:4px;
    left:-60px;
}


#snappedview {
    position:absolute;
    left:0;
    top:0;
    visibility:hidden;
    display:-ms-grid;
    -ms-grid-columns:100vw;
    -ms-grid-rows:20fr 80fr;
    height:100vh;
    padding-top:190px;
    overflow-x:auto;
    overflow-y:hidden;
    background-image:url(/images/snappedview_bg.png);
    background-color:#feffff;
    background-repeat:no-repeat;
}

#snappedview .win-container{
    background-color:transparent;
}

#contentHost {
    height:100%;
}

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {

    #contentHost {
        display:none;
    }

    #snappedview {
        position:static;
        visibility:visible;
    }

}/*end snap view*/

@media screen and (-ms-view-state: fullscreen-portrait) {
}

/* start main menu*/
#home {
    background-image:url(/images/main_bg.png), url(/images/menubg_pattern.png);
    background-repeat:no-repeat, repeat-x;
}

a.startgame_button {
    display:block;
    position:absolute;
    left: 117px;
    top: 409px;
    width: 551px;
    height: 115px;
    background-image: url(/images/start_game.png);
    background-size:cover;
    animation-name: start_button_anim;
    animation-duration:1s;
    animation-iteration-count:infinite;
}

a.startgame_button span{
    display:none;
}


.main_menu_button {
    position:absolute;
    width:250px;
    height:250px;
    background-repeat:no-repeat;
    transition-property:transform;
    transition-duration:0.1s;
}

.main_menu_button:hover {
    transform:scale(1.03);
}

.main_menu_button:active {
    transform:scale(0.95);
}

.edithikers_button {
    background-image: url(/images/edithikers_menu.png);
}

.edityeti_button {
    background-image: url(/images/edityeti_menu.png);
}

.main_menu_button span {
    display:none;
}

@media screen and (orientation: landscape) {
    .main_menu_button {
        left:846px;
    }

    .main_menu_button.edithikers_button {
        top:250px;
    }
    .main_menu_button.edityeti_button {
        top:512px;
    }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .main_menu_button {
        left:auto;
        right:5%;
    }
}

@media screen and (orientation: portrait) {
    .main_menu_button {
        top:65%;
    }

    .main_menu_button.edithikers_button {
        left:15%;
    }
    .main_menu_button.edityeti_button {
        right:15%;
    }
}


@keyframes start_button_anim {

  from {     
    transform:scale(1.0); 
  }
  50% {
    transform:scale(0.9); 
  }
  to {         
    transform:scale(1.0); 
  }

}

/*end main menu*/

/* start hikers list screen */

#hikers {
    background-image: url(/images/menubg_pattern.png);
    background-repeat: repeat-x;
    background-position-y:-50px;
}

#hikers #imageOverlayLanding {
    margin-top:200px;
}

/* end hikers list screen */


/* overall list dimensions */
#imageOverlayLanding
{
    height:80%;
}

#imageOverlayLanding.home {
    margin-top:80px;
    height:80%;
}


a {
    color:#000;
}

a:hover {
    color:#747474;
}


/*-------------------------------------------------------------------------------------------*/
/* imageOverlay-landing - used on app template landing page */
/*-------------------------------------------------------------------------------------------*/
    /* starting margin */
    #imageOverlayLanding .win-horizontal.win-viewport .win-surface
    {
        margin: 0px 115px;
    }

    #imageOverlayLanding .win-container {
        background:none;
        transition-property:transform;
        transition-duration:0.1s;
    }

    .win-listview .win-container:not(.win-footprint) {
        z-index:10000;
    }

    .win-listview .win-container.win-footprint {
        z-index:20000;
        opacity:0.3;
    }

    #imageOverlayLanding .win-container:hover {
        outline:none;
        transform:scale(1.03);
        cursor:pointer;
    }

    #imageOverlayLanding .win-selectionborder {
        display:none;
    }


    #imageOverlayLanding .win-selectioncheckmarkbackground {
        display:none;
    }


    #imageOverlayLanding .win-selectioncheckmark, #imageOverlayLanding .win-footprint .win-selectionhint {
        position:absolute;
        color:transparent;
        left:auto;
        right:20px;
        top:0px;
        width:105px;
        height:82px;
        background-image:url(/images/check.png);
        background-repeat:no-repeat;
    }

    #imageOverlayLanding .win-selectionbackground, #imageOverlayLanding .win-selectionbordercontainer {
        display:none;
    }

    /* individual item dimensions and grid placement */
    .imageOverlayLanding
    {
        width: 250px;
        height: 250px;
        overflow: hidden;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;
        position:relative;
    }


        /* image */
        .imageOverlayLanding .imageOverlayLandingImageWrap
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position:relative;
            background-position:center center;
            background-repeat:no-repeat;
        }

        .imageOverlayLanding .imageOverlayLandingImage {
            height:100%;
            display:block;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }

        .imageOverlayLanding .imageOverlayLandingImageWrap .face {
            position:absolute;
            top:51px;
            left:86px;
            width:61px;
        }
        
        /* overlay properties */
        .imageOverlayLanding .imageOverlayLandingOverlay
        {
            -ms-grid-row-align: end;
            height: 85px;
            overflow: hidden;
            padding: 5px 12px 0px 12px;
            position:relative;
        }
       
            /* text line 1 */
            .imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayText
            {
                width: 220px;
                
                text-align:center;
                /*height: 60px;*/
                overflow: hidden;
                color: #093130;
                font-size:25px;
                background-image:-ms-linear-gradient(top left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
                padding:5px;
            }

            /* text line 2 */
            .imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayTextLight
            {
                width: 220px;
               /* height: 20px;*/
                white-space: nowrap;
                overflow: hidden;
                color: rgba(255,255,255,0.49);
            }

            .imageOverlayLanding.menu .imageOverlayLandingOverlay .imageOverlayLandingOverlayText {
                height:auto;
             }

.imageOverlayLanding .imageOverlayLandingOverlay .true h6{
    display:none;
}

body#hiker, body#yeti {
    background-image: url(/images/menubg_pattern.png);
    background-repeat: repeat-x;
    background-position-y:-50px;
}

#edit_temp {
    height:100%;
    width:100%;
}

#edit_temp .controls_container {
    width:535px;
    height:474px;
    position:absolute;
    display:-ms-grid;
    -ms-grid-columns:1fr 1fr;
    -ms-grid-rows:1fr 1fr;
}

@media screen and (orientation: landscape) {
    #edit_temp .controls_container {
        left:700px;
        top:200px;
    }
}


@media screen and (orientation: portrait) {
    #edit_temp .controls_container {
        left:100px;
        top:700px;
    }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    #edit_temp .controls_container {
        left:520px;
        top:200px;
        transform:scale(0.7);
    }
}

#edit_temp .controls_container .edit_control_box {
    cursor:pointer;
    padding:5px;
    transition-property:transform;
    transition-duration:0.1s;
}

#edit_temp .controls_container .edit_control_box:hover {
    transform:scale(1.03);
}

#edit_temp .controls_container .edit_control_box:active {
    transform:scale(0.95);
}

#edit_temp .controls_container .conf_inner_wrap > div {
    background-repeat:no-repeat;
}


#edit_temp .controls_container #color_conf{
    -ms-grid-row:1;
    -ms-grid-column:1;
}

#edit_temp .controls_container #color_conf .conf_inner_wrap div:first-child {
    background-image:url(/images/edit_color_icon.png);
}

#edit_temp .controls_container #pic_conf {
    -ms-grid-row:1;
    -ms-grid-column:2;
}

body#yeti #edit_temp .controls_container #pic_conf {
    -ms-grid-row:1;
    -ms-grid-column:1;
}

#edit_temp .controls_container #pic_conf .conf_inner_wrap div:first-child {
    background-image:url(/images/edit_image_icon.png);
}

#edit_temp #name_conf {
    -ms-grid-row:2;
    -ms-grid-column:1;
}

body#yeti #edit_temp #name_conf {
    -ms-grid-row:1;
    -ms-grid-column:2;
}

#edit_temp .controls_container #name_conf .conf_inner_wrap div:first-child {
    background-image:url(/images/edit_name_icon.png);
}

#edit_temp #share {
    -ms-grid-row:2;
    -ms-grid-column:2;
}

#edit_temp.true #share, #yeti #edit_temp #share{
    display:none;
}

body#yeti #edit_temp #share {
    -ms-grid-row:2;
    -ms-grid-column:1;
}

#edit_temp .controls_container #share .conf_inner_wrap div:first-child {
    background-image:url(/images/edit_share_icon.png);
}

#edit_temp #edit_img_wrap{
    position:absolute;
    top:200px;
    left:100px;
    text-align:center;
    width:520px;
    background-repeat:no-repeat;
    background-position:center center;
}

#edit_temp #edit_img_wrap.color_0096dc {
    background-image:url(/images/edit_bg_0096dc.png);
}

#edit_temp #edit_img_wrap.color_00c0ac {
    background-image:url(/images/edit_bg_00c0ac.png);
}

#edit_temp #edit_img_wrap.color_333333, #edit_temp #edit_img_wrap.color_333 {
    background-image:url(/images/edit_bg_333333.png);
}

#edit_temp #edit_img_wrap.color_dc8000 {
    background-image:url(/images/edit_bg_dc8000.png);
}

#edit_temp #edit_img_wrap .edit_face_wrap{
    margin:25px auto;
    position:relative;
}

#hiker_conf_wrap.yeti #edit_img_wrap .edit_face_wrap {
    margin:0;
    height:100%;
    width:100%;
}

#edit_temp #edit_img_wrap .edit_face_wrap img.face{
    position:absolute;
    top:63px;
    left:194px;
    width:105px;
}

#yeti #edit_temp #edit_img_wrap .edit_face_wrap img.face {
    width:70px;
    height:70px;
    top:129px;
    left:217px;
}

#edit_temp #edit_img_wrap .edit_face_wrap img.body{
    position:relative;
}

#yeti #edit_temp #edit_img_wrap .edit_face_wrap img.body {
    width:500px;
}

#edit_temp #pic_conf img{
    display:block;
    width:100%;
}

#edit_temp #name_conf {
    background-repeat:no-repeat;
    overflow:hidden;
}

.conf_inner_wrap {
    display:-ms-grid;
    -ms-grid-columns:1fr;
    -ms-grid-rows:3fr 1fr;
    height:100%;
    overflow:hidden;
    
    color:#0a3130;
    font-size:25px;
}

.conf_inner_wrap > div {
    -ms-grid-row:1;
}

.conf_inner_wrap > div + div {
    -ms-grid-row:2;
}

.conf_inner_wrap > div + div p {
    margin:0;
    padding:5px;
}

#colorFlyout div.select_color_wrap {
    width:200px;
    height:50px;
    display:-ms-grid;
    -ms-grid-columns:1fr 1fr 1fr 1fr;
    -ms-grid-rows:1fr;
}

#colorFlyout.yeti div.select_color_wrap {
    width:250px;
    -ms-grid-columns:1fr 1fr 1fr 1fr 1fr;
}

#colorFlyout div.select_color_wrap div {
    margin:2px;
}

#colorFlyout div.select_color_wrap div.color_333333 {
    background-color:#333333;
    -ms-grid-column: 1;
}

#colorFlyout div.select_color_wrap div.color_c9b497 {
    background-color:#c9b497;
    -ms-grid-column: 1;
}

#colorFlyout div.select_color_wrap div.color_dc8000 {
    background-color:#dc8000;
    -ms-grid-column: 2;
}

#colorFlyout div.select_color_wrap div.color_7facc1 {
    background-color:#7facc1;
    -ms-grid-column: 2;
}

#colorFlyout div.select_color_wrap div.color_00c0ac {
    background-color:#00c0ac;
    -ms-grid-column: 3;
}

#colorFlyout div.select_color_wrap div.color_c2c777 {
    background-color:#c2c777;
    -ms-grid-column: 3;
}

#colorFlyout div.select_color_wrap div.color_0096dc {
    background-color:#0096dc;
    -ms-grid-column: 4;
}

#colorFlyout div.select_color_wrap div.color_c9a6ba {
    background-color:#c9a6ba;
    -ms-grid-column: 4;
}

#colorFlyout div.select_color_wrap div.color_cc8d7b {
    background-color:#cc8d7b;
    -ms-grid-column: 5;
}

/* overall list dimensions */

#snapview_yeti_data {
    -ms-grid-row: 1;
    padding-top:10px;
}

#snapview_yeti_data h3{
    margin-left:17px;
}

#snapview_yeti_data hr {
    margin:0 17px;
}

#snapview_yeti_data .imageTextListLandingSnap{
    margin:20px 0px 20px 7px;
}

#imageTextListLandingSnap {
    margin-left: 0;
    -ms-grid-row: 2;
    height:100%;
    background-color:transparent;
}

    /*-------------------------------------------------------------------------------------------*/
    /* imageTextList-landingSnap - used in app template landing page snap view                   */
    /*-------------------------------------------------------------------------------------------*/
    /* margins between items */
    #imageTextListLandingSnap .win-container {
        margin-top: 0px;
        margin-bottom: 0px;
    }

        /* hide the hover outline for edge-to-edge items */
        #imageTextListLandingSnap .win-container:hover {
            outline: none;
        }

/* individual item dimensions */
.imageTextListLandingSnap {
    display:-ms-grid;
    -ms-grid-columns:80px auto;
    -ms-grid-rows:80px;
    padding: 5px;
    margin:0 0 2px 0;
    width: 282px;
    background-color:transparent;
}

    /* image: icon */
    .imageTextListLandingSnap img.imageTextListLandingSnapImage {
        -ms-grid-column: 1;
        margin: 5px;
        border:3px solid #333;
    }

    /* Text line 1 */
    .imageTextListLandingSnap .imageTextListLandingSnapText {
        -ms-grid-column: 2;
        margin: 4px 5px 5px 5px;
        overflow: hidden;
    }

    .imageTextListLandingSnap .imageTextListLandingSnapText p {
        -ms-text-overflow:ellipsis;
        text-overflow:ellipsis;
        width:100%;
        white-space:nowrap;
        overflow:hidden;
        margin:0;
        padding:2px 0;
    }


/* style the focus visual for edge-to-edge items */
#imageTextListLandingSnap .win-focusedoutline {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    left: 2px;
    top: 2px;
    z-index: 5;
}